/*
 *@description:订单页面
 *@Author:@reynold
 *@Date:2025-03-25 11:37:08
 *@Update:2025-03-25 11:37:08
 *@Version: V1.0.0
*/
<template>
  <div class="order_box">
    <van-nav-bar title="订单" />
    <van-tabs v-model="active" animated @change="handleTabChange">
      <van-tab v-for="item in orderTips" :title="item.name" :key="item.id">
        <!-- 全部订单 -->
        <div v-if="item.id === 1">
          <div v-for="order in filteredOrders('all')" :key="order.orderId">
            <van-collapse v-model="activeNames" accordion>
              <van-collapse-item :name="order.orderId">
                <template #title>
                  <div class="order-header">
                    <span class="order-title">{{ order.name }}</span>
                    <van-tag :type="getStatusType(order.status)">{{ order.status }}</van-tag>
                    <span class="order-time">{{ order.createTime }}</span>
                  </div>
                </template>
                <!-- 订单内容 -->
                <div v-for="product in order.produts" :key="product.id">
                  <van-card :num="product.currentNum" :price="(product.price).toFixed(2)" :desc="product.description"
                    :title="product.name" :thumb="product.imgUrl" />
                </div>
                <div class="order-footer">
                  <span class="total-price">总计: ￥{{ (order.totolPrice / 100).toFixed(2) }}</span>
                  <div class="action-buttons">
                    <van-button v-if="order.status === '待付款'" type="primary" size="small"
                      @click.stop="handlePay(order.orderId)">去付款</van-button>
                    <van-button v-if="order.status === '待服务'" type="info" size="small"
                      @click.stop="handleStartService(order.orderId)">开始服务</van-button>
                    <van-button v-if="order.status === '已完成'" type="success" size="small"
                      @click.stop="handleRate(order.orderId)">评价订单</van-button>
                    <van-button type="default" size="small" @click.stop="handleCancel(order.orderId)"
                      v-if="order.status === '待付款' || order.status === '待服务'">取消订单</van-button>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <van-empty v-if="filteredOrders('all').length === 0" description="暂无订单" />
        </div>

        <!-- 待付款订单 -->
        <div v-if="item.id === 2">
          <div v-for="order in filteredOrders('pending')" :key="order.orderId">
            <van-collapse v-model="activeNames" accordion>
              <van-collapse-item :name="order.orderId">
                <template #title>
                  <div class="order-header">
                    <span class="order-title">{{ order.name }}</span>
                    <van-tag type="danger">{{ order.status }}</van-tag>
                    <span class="order-time">{{ order.createTime }}</span>
                  </div>
                </template>
                <div v-for="product in order.produts" :key="product.id">
                  <van-card :num="product.currentNum" :price="(product.price).toFixed(2)" :desc="product.description"
                    :title="product.name" :thumb="product.imgUrl" />
                </div>
                <div class="order-footer">
                  <span class="total-price">总计: ￥{{ (order.totolPrice / 100).toFixed(2) }}</span>
                  <div class="action-buttons">
                    <van-button type="primary" size="small" @click.stop="handlePay(order.orderId)">立即支付</van-button>
                    <van-button type="default" size="small" @click.stop="handleCancel(order.orderId)">取消订单</van-button>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <van-empty v-if="filteredOrders('pending').length === 0" description="暂无待付款订单" />
        </div>

        <!-- 待服务订单 -->
        <div v-if="item.id === 3">
          <div v-for="order in filteredOrders('unserved')" :key="order.orderId">
            <van-collapse v-model="activeNames" accordion>
              <van-collapse-item :name="order.orderId">
                <template #title>
                  <div class="order-header">
                    <span class="order-title">{{ order.name }}</span>
                    <van-tag type="warning">{{ order.status }}</van-tag>
                    <span class="order-time">{{ order.createTime }}</span>
                  </div>
                </template>
                <div v-for="product in order.produts" :key="product.id">
                  <van-card :num="product.currentNum" :price="(product.price).toFixed(2)" :desc="product.description"
                    :title="product.name" :thumb="product.imgUrl" />
                </div>
                <div class="order-footer">
                  <span class="total-price">总计: ￥{{ (order.totolPrice / 100).toFixed(2) }}</span>
                  <div class="action-buttons">
                    <van-button type="info" size="small"
                      @click.stop="handleStartService(order.orderId)">开始服务</van-button>
                    <van-button type="default" size="small" @click.stop="handleCancel(order.orderId)">取消订单</van-button>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <van-empty v-if="filteredOrders('unserved').length === 0" description="暂无待服务订单" />
        </div>

        <!-- 已完成订单 -->
        <div v-if="item.id === 4">
          <div v-for="order in filteredOrders('completed')" :key="order.orderId">
            <van-collapse v-model="activeNames" accordion>
              <van-collapse-item :name="order.orderId">
                <template #title>
                  <div class="order-header">
                    <span class="order-title">{{ order.name }}</span>
                    <van-tag type="success">{{ order.status }}</van-tag>
                    <span class="order-time">{{ order.resTime }}</span>
                  </div>
                </template>
                <div v-for="product in order.produts" :key="product.id">
                  <van-card :num="product.currentNum" :price="(product.price).toFixed(2)" :desc="product.description"
                    :title="product.name" :thumb="product.imgUrl" />
                </div>
                <div class="order-footer">
                  <span class="total-price">总计: ￥{{ (order.totolPrice / 100).toFixed(2) }}</span>
                  <div class="action-buttons">
                    <van-button type="success" size="small" @click.stop="handleRate(order.orderId)">评价订单</van-button>
                    <van-button type="default" size="small" @click.stop="handleReorder(order.orderId)">再次购买</van-button>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>
          <van-empty v-if="filteredOrders('completed').length === 0" description="暂无已完成订单" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
      active: 0,
      activeNames: [],
      orderTips: [
        { id: 1, name: "全部订单" },
        { id: 2, name: "待付款" },
        { id: 3, name: "待服务" },
        { id: 4, name: "已完成" }
      ]
    }
  },
  methods: {
    getOrderList() {
      let orderList = localStorage.getItem('mock_orderList')
      if(orderList) {
        this.orderList = JSON.parse(orderList)
      } else {
        this.orderList = [
          {
            orderId: 1,
            name: '订单1',
            createTime: '2025-03-25 11:37:08',
            resTime: '2025-03-25 12:47:09',
            imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
            totolPrice: 200,
            status: '待付款',
            rating:'3.5小时',
            produts: [
              {
                id: 1,
                name: '产品1',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                duration: '4小时',
                categoryId: 1,
                rating: '3.5小时',
                bookCount: 800,
                description: '家政清洁',
              },
              {
                id: 2,
                name: '产品2',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                duration: '4小时',
                categoryId: 1,
                rating: '3.5小时',
                bookCount: 800,
                description: '产品描述...包含了什么项目..',
              }
            ]
          },
          {
            orderId: 2,
            name: '订单2',
            createTime: '2025-03-24 10:15:30',
            resTime: '2025-03-25 12:47:09',
            imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
            totolPrice: 200,
            status: '待服务',
            rating: '3.5小时',
            produts: [
              {
                id: 1,
                name: '产品1',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                duration: '4小时',
                categoryId: 1,
                rating: '3.5小时',
                bookCount: 800,
                description: '产品描述...包含了什么项目..',
              },
              {
                id: 2,
                name: '产品2',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                duration: '4小时',
                categoryId: 1,
                rating: '3.5小时',
                bookCount: 800,
                description: '产品描述...包含了什么项目..',
              }
            ]
          },
          {
            orderId: 3,
            name: '订单3',
            createTime: '2025-03-20 14:30:45',
            resTime: '2025-03-20 16:20:00',
            imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
            totolPrice: 100,
            status: '已完成',
            produts: [
              {
                id: 1,
                name: '产品1',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                description: '产品描述...包含了什么项目..',
              },
              {
                id: 2,
                name: '产品2',
                num: 1,
                imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
                price: 100,
                description: '产品描述...包含了什么项目..',
              }
            ]
          }
        ]
        localStorage.setItem('mock_orderList', JSON.stringify(this.orderList))
      }
    },
    // 根据状态筛选订单
    filteredOrders(type) {
      switch(type) {
        case 'pending': // 待付款
          return this.orderList.filter(order => order.status === '待付款')
        case 'unserved': // 待服务
          return this.orderList.filter(order => order.status === '待服务')
        case 'completed': // 已完成
          return this.orderList.filter(order => order.status === '已完成')
        default: // 全部
          return this.orderList
      }
    },
    // 获取状态标签类型
    getStatusType(status) {
      switch(status) {
        case '待付款': return 'danger'
        case '待服务': return 'warning'
        case '已完成': return 'success'
        default: return 'default'
      }
    },
    // 处理支付
    handlePay(orderId) {
      this.$dialog.confirm({
        title: '确认支付',
        message: '您确定要支付该订单吗？'
      }).then(() => {
        const order = this.orderList.find(item => item.orderId === orderId)
        if (order) {
          order.status = '待服务'
          this.updateOrderList()
          this.$toast.success('支付成功')
        }
      }).catch(() => {
        // 取消支付
      })
    },
    // 开始服务
    handleStartService(orderId) {
      this.$dialog.confirm({
        title: '开始服务',
        message: '确认开始服务该订单？'
      }).then(() => {
        const order = this.orderList.find(item => item.orderId === orderId)
        if (order) {
          order.status = '已完成'
          order.resTime = new Date().toLocaleString()
          this.updateOrderList()
          this.$toast.success('服务已开始')
        }
      })
    },
    // 评价订单
    handleRate(orderId) {
      this.$router.push(`/order/rate/${orderId}`)
    },
    // 取消订单
    handleCancel(orderId) {
      this.$dialog.confirm({
        title: '取消订单',
        message: '确定要取消该订单吗？'
      }).then(() => {
        this.orderList = this.orderList.filter(item => item.orderId !== orderId)
        this.updateOrderList()
        this.$toast.success('订单已取消')
      })
    },
    // 再次购买
    handleReorder(orderId) {
      const order = this.orderList.find(item => item.orderId === orderId)
      if (order) {
        this.$router.push({
          path: '/product/detail',
          query: { 
            products: JSON.stringify(order.produts.map(p => p.id))
          }
        })
      }
    },
    // 更新本地存储
    updateOrderList() {
      localStorage.setItem('mock_orderList', JSON.stringify(this.orderList))
    },
    // 标签切换
    handleTabChange(index) {
      this.activeNames = [] // 清空展开项
    }
  },
  created() {
    this.getOrderList()
  }
}
</script>

<style scoped>
.order_box {
  padding-bottom: 50px;
}

.order-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.order-title {
  flex: 1;
  margin-right: 10px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #f5f5f5;
}

.total-price {
  font-weight: bold;
  color: #ee0a24;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.van-collapse-item {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.van-card {
  background-color: #fff;
  margin-bottom: 5px;
}

.van-tag {
  margin-left: auto;
}
</style>